// $(function () {
//     // 1 发送请求 显示文章分类数据渲染页面
//     // /admin/category/list
//     function getCategorytList() {
//         // $.get("") // token  headers
//         $.ajax({
//             url: "http://localhost:8080/api/v1/admin/category/list",
//             headers: {
//                 Authorization: localStorage.getItem("token")
//             },
//             // headers
//             success(res) {
//                 // 获取数据
//                 const list = res.data;
//                 // 拼接模版
//                 const html = template("trTpl", { list });
//                 // 渲染模版 
//                 $(".category_table tbody").html(html);

//             }
//         })

//     }

//     getCategorytList();
// })

$(function () {
    // 1 发送请求 显示文章分类数据渲染页面
    // /admin/category/list
    function getCategorytList() {
        // $.get("") // token  headers

        $.get("/admin/category/list", function (res) {
            // 获取数据
            const list = res.data;
            // 拼接模版
            const html = template("trTpl", { list });
            // 渲染模版 
            $(".category_table tbody").html(html);
        })

    }

    //2 新增数据保存并渲染到页面
    $('.btn_opt_add ').on('click', function () {
        // 2.1获取用户输入的数据
        const name = $("input[name='name']").val().trim();
        const slug = $("input[name='slug']").val().trim();
        // console.log(name, slug);

        // 2.2判断输入框内容是否为空
        if (!name || !slug) {

            layer.msg('名称和别名不能为空');
            // 弹出提示用户 
            return;
        }

        // 2.3发送请求
        $.post('/admin/category/add', { name, slug }, function (res) {

            layer.msg('数据新增成功');

            //2.4 数据新增成功 并清空输入框内容
            $("input[name='name']").val('')
            $("input[name='slug']").val('')

            // 2.5 关闭新增的表单
            $("#myModal").modal("hide");

            //2.6 获取最新的数据
            getCategorytList();
        })






    })

    //3编辑用户输入的内容
    $(".category_table").on("click", ".edit", function () {
        // 显示模态框
        $("#editModal").modal("show");

        // 获取编辑上的属性值：{id: 1, name: '爱生活', slug: '热爱生活'}
        const item = $(this).data("item");
        // console.log(item);

        //  将数据 设置到 模态框中 
        $("#name").val(item.name);
        $("#slug").val(item.slug);

        $("#editModal").data("id", item.id);
    })

    // 给模态框里面的保存设置点击事件
    $(".btn_opt_edit").click(function () {

        //点击保存获得的内容：{name: '爱生活', slug: '热爱生活', id: 1}
        const params = {
            name: $("#name").val(),
            slug: $("#slug").val(),
            id: $("#editModal").data("id")
        };
        // console.log(params);

        //获取后渲染到页面 发送请求 完成编辑的内容
        $.post("/admin/category/edit", params, function (res) {

            // console.log(res);

            layer.msg('编辑成功');

            // 编辑成功后清空表单内容
            $("#name").val("");
            $("#slug").val("");
            $("#editModal").data("");

            //关闭编辑模态框
            $("#editModal").modal("hide");

            //发送渲染最新数据
            getCategorytList();
        })



    })



    // 4删除按钮
    $(".category_table").on("click", ".delete", function () {
        // console.log(this);

        const id = $(this).data("id");
        // console.log(id);

        layer.confirm('不准删 😡', { title: '提示' }, function (index) {
            $.post('/admin/category/delete', { id }, function (res) {
                // console.log(res);v
                getCategorytList();
            })
            // 关闭窗口
            layer.close(index);
        });





    })


    // 1 发送请求 显示文章分类数据渲染页面
    getCategorytList();







})